<template>
  <div class="user">
    <van-nav-bar title="个人中心"
                 :left-arrow='false'
                 :fixed=true>
      <!-- <van-icon name="setting-o"
                slot="right"
                size=20
                @click="handleSetting" /> -->
    </van-nav-bar>
    <div class="img-user">
      <van-image round
                 src="https://img.yzcdn.cn/vant/cat.jpeg" />
      <p class="username">刚刚好，，，</p>
    </div>
    <div class="order">
      <div class="orderTop">
        <div class="myOrder">我的订单</div>
        <div class="lookAllOrder">
          查看全部
          <van-icon name="arrow" />
        </div>
      </div>
      <van-divider />
      <div class="orderBottom">
        <div v-for="(item,index) in goodsInfoList"
             :key="index">
          <div class="icon">
            <van-icon :name='item.icon'
                      :info='item.info' />
          </div>
          <span>{{item.name}}</span>
        </div>
      </div>
    </div>
    <van-cell v-for="(item,index) in settingList"
              :key="index"
              :title="item.title"
              :icon="item.icon"
              is-link
              :to='item.linkTo' />
    <van-divider />
    <van-cell value="退出登录"
              is-link
              to='/login' />
  </div>
</template>

<script>
export default {
  name: 'user',
  data () {
    return {
      goodsInfoList: [
        {
          icon: 'pending-payment',
          info: '2',
          name: '待付款'
        },
        {
          icon: 'peer-pay',
          info: '',
          name: '待发货'
        },
        {
          icon: 'logistics',
          info: '5',
          name: '待收货'
        },
        {
          icon: 'chat-o',
          info: '1',
          name: '待评价'
        },
        {
          icon: 'after-sale',
          info: '',
          name: '退款'
        }
      ],
      settingList: [
        {
          title: '收货地址',
          icon: 'location-o',
          linkTo: '/addressInfo'
        },
        {
          title: '收藏夹',
          icon: 'like-o',
          linkTo: '/favorites'
        },
        {
          title: '浏览记录',
          icon: 'browsing-history-o',
          linkTo: '/history'
        },
        {
          title: '功能反馈',
          icon: 'comment-o',
          linkTo: '/feedback'
        },
        {
          title: '常见问题',
          icon: 'question-o',
          linkTo: '/question'
        }
      ]
    }
  },
  created () {

  },
  components: {

  },
  methods: {
    /*我的设置 */
    handleSetting () {
      /* 跳转到设置页面 */
      this.$toast('设置');
    }
  }
}
</script>

<style scoped lang="css">
.user {
  height: 100vh;
  padding-top: 90px;
  background-color: #fafafa;
}
.img-user {
  display: flex;
  padding: 20px 0 20px 50px;
  align-items: center;
  /* background-color: #fb7536; */
}
.van-image--round {
  width: 160px;
  height: 160px;
}
.username {
  padding-left: 30px;
  font-size: 40px;
  color: #323233;
}

/* 订单 */
.order {
  margin: 10px 20px;
  padding: 30px 10px;
  background-color: #fff;
  border-radius: 15px;
}
.order .orderTop {
  display: flex;
  padding: 0 10px;
  justify-content: space-between;
  font-size: 30px;
}
.order .orderTop .myOrder {
  color: #151516;
}
.order .orderTop .lookAllOrder {
  color: #999;
}

.lookAllOrder .van-icon {
  /* font-size: 26px; */
  /* 基线对其方式：底部对其 */
  vertical-align: text-bottom;
}
.orderBottom {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  font-size: 20px;
}
.orderBottom .icon {
  text-align: center;
  font-size: 50px;
}
</style>
